<template>
	<view class="shopList">
	      <view class="title" :style="{'height': navHeight+statusBarHeight + 'px'}">
			  <text class="iconfont iconhuaban73" @tap="$emit('close')"></text>
			  <view class="serch"><text class="iconfont iconhuaban18"></text><input type="text" placeholder="搜索您感兴趣的内容吧" /></view>
		  </view>
		  <cl-filter-bar @change="onChange">
		  	<!-- 多选下拉 -->
		  	<cl-filter-item
		  		v-model="arr"
		  		label="综合"
		  		:options="list"
		  		type="dropdown"
		  		prop="zh"
		  	></cl-filter-item>
			<!-- 升序，降序 -->
		  	<cl-filter-item prop="xl" v-model="sort" label="销量" type="order"></cl-filter-item>
		  	<!-- 筛选 -->
			<text class="cl-filter-item">刷选</text>
		  	<!-- <cl-filter-item  v-model="filter" label="筛选" type="switch"></cl-filter-item> -->
		  </cl-filter-bar>
		  <view class="shopItem">
			  <scroll-view scroll-y="true" @scrolltolower="scrolltolower">
			  	<view class="cell" v-for="i in 20">
					  <view class="col-1">
						  <image src=""></image>
					  </view>
					  <view class="col-2">
						  <view class="row-1">史努比联名款日本bruno锅多功能料理锅网红一体料理锅网红一体</view>
						  <view class="row-2">多功能 | 环保级别</view>
						  <view class="row-3">
							  <text>899人付款</text>
							  <text class="o_price">￥2000</text>
							  <text class="n_price">￥1299.98</text>
						  </view>
					  </view>
					  <view class="col-3">
						  <text class="iconfont iconhuaban64"></text>
						  <text>发送</text>
					  </view>
			  	</view>
			  </scroll-view>
		  </view>
		  <u-popup v-model="filterShow" mode="right" width="90%" height="100%">
			  <view class="screenRight" :style="{'margin-top': navHeight+statusBarHeight + 'px'}">
				  <view class="price">价格区间（元）</view>
				  <view class="c_cPrice">
					  <input type="text" placeholder="最低价" />
					  <text></text>
					  <input type="text" placeholder="最高价" />
				  </view>
				  <view class="brand">
					  <text class="row-1">品牌</text>
					  <text class="row-2">更多品牌 ></text>
				  </view>
				  <view class="brandList">
					  <text v-for="i in 15">索菲亚</text>
				  </view>
				  <view class="brand">
					  <view class="">品类</view>
					  <view class="">更多</view>
				  </view>
				  <view class="brandList">
				  	  <text v-for="i in 15">浴室柜组合</text>
				  </view>
				  <view class="">
					  <view>重置</view>
					  <view>确认</view>
				  </view>
			  </view>
		  </u-popup>
	</view>
</template>

<script>
	import clFilterBar from "../components/cl-uni/components/cl-filter-bar/cl-filter-bar.vue"
	import clFilterItem from "../components/cl-uni/components/cl-filter-item/cl-filter-item.vue"
	export default{
		data(){
			return{
				list: [
					{
						label: "综合",
						value: 1
					},
					{
						label: "价格降序",
						value: 2
					},
					{
						label: "价格升序",
						value: 3
					}
				],
				arr: [1],
				str: "",
				sort: "desc",
				filter:"",
				filterShow:false
			}
		},
		components: {
			clFilterBar,
			clFilterItem
		},
		computed: {
			navHeight() {
				return this.$store.state.system.navBarHeight
			}, // Nav栏高度
			statusBarHeight(){
				let systemInfo =  uni.getSystemInfoSync()
				return systemInfo.statusBarHeight || 0
			}
		},
		methods:{
			scrolltolower(){
				console.log(123)
			}
		}
	}
</script>

<style lang="scss">
	.shopList{
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		.title{
			display: flex;
			width: 100%;
			height: 88rpx;
			background: #F6F7FB;
			align-items: center;
			.iconhuaban73{
				font-size: 36rpx;
				color: #333333;
				padding: 0 20rpx;
			}
			.serch{
				display: flex;
				align-items: center;
				width: 422rpx;
				height: 62rpx;
				background: #FFFFFF;
				border-radius: 34rpx;
				.iconhuaban18{
					font-size: 32rpx;
					color: #939393;
					padding: 0 20rpx 0 10rpx;
				}
				
			}
		}
		.screen{
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 114rpx;
			background: #FFFFFF;
			color: #333333;
			font-size: 24rpx;
			border-radius: 24rpx 24rpx 0 0;
			.iconhuaban114{
				font-size: 30rpx;
			}
		}
		.shopItem{
			flex: 1;
		    min-height: 0;
			overflow-y: hidden;
			background: #F9FAFC;
			scroll-view{
				width: 100%;
				height: 100%;
			}
			.cell{
				display: flex;
				padding: 10rpx 32rpx;
				background: #FFFFFF;
				margin-bottom: 20rpx;
				.col-1{
					width: 212rpx;
					height: 212rpx;
					border-radius: 8rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.col-2{
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 0 28rpx;
					justify-content: space-between;
					.row-1{
						font-size: 28rpx;
						color: #1A1C20;
						text-overflow: ellipsis;
						display: -webkit-box;
						overflow: hidden;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.row-2{
						font-size: 22rpx;
						line-height: 32rpx;
						color: #939393;
					}
					.row-3{
						font-size: 22rpx;
						line-height: 32rpx;
						color: #939393;
						.o_price{
							font-size: 18rpx;
							padding-left: 20rpx;
							text-decoration: line-through;
						}
						.n_price{
							font-size: 32rpx;
							color: #E9423E;
						}
					}
				}
				.col-3{
					width: 76rpx;
					height: 212rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background: #F9F6F3;
					border: 2px solid #C3AB7C;
					color: #C3AB7C;
					border-radius: 8px;
					.iconfont{
						font-size: 42rpx;
					}
				}
			}
		}
		.screenRight{
			padding: 0 20rpx;
			.price{
				font-size: 28rpx;
				font-weight: 500;
				color: #1A1C20;
			}
			.c_cPrice{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 24rpx;
				input{
					width: 252rpx;
					height: 64rpx;
					background: #F5F5F5;
					border-radius: 4px;
					text-align: center;
				}
				text{
					background: #F5F5F5;
					width: 50rpx;
					height: 7rpx;
					
				}
			}
			.brand{
				display: flex;
				justify-content: space-between;
				margin-top: 56rpx;
				align-items: center;
				.row-1{
					font-size: 28rpx;
					font-weight: 500;
					color: #1A1C20;
				}
				.row-2{
					font-size: 22rpx;
					color: #505050;
				}
			}
			.category{
				justify-content: space-between;
				margin-top: 56rpx;
				align-items: center;
			}
			.brandList{
				display: flex;
				flex-wrap: wrap;
				text{
					display: block;
					width: 196rpx;
					height: 64rpx;
					background: #F5F5F5;
					line-height: 64rpx;
					text-align: center;
					border-radius: 4rpx;
					margin:10rpx 6rpx 10rpx 6rpx;
				}
				
			}
		}
		
	}
</style>
